<template>
  <div>
      <el-table :data="nowTableDate" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="80" align="center"></el-table-column>
        <el-table-column prop="cate_name" label="分类" width="120"></el-table-column>
        <el-table-column label="头像" width="120" align="center">
          <template slot-scope="scope">
              <div class="listHead-box">
                  <img class="listHead" :src="scope.row.avatar" alt="图片加载失败">
              </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="hits" label="浏览" width="100" align="center"></el-table-column>
        <el-table-column prop="keeps" label="收藏" width="100" align="center"></el-table-column>
        <el-table-column label="置顶" width="100" align="center">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.top">置顶</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="!(scope.row.status - 1)">启用</el-tag>
            <el-tag  type="info" v-else>停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
      background
      :current-page.sync="currentPage"
      :page-sizes="[10, 15, 20, 30]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="listdata.length">
      </el-pagination>
  </div>
</template>

<script>


export default {
    name: '',
    props: {
        // 父组件传递的列表数据
        listdata: {
            type: Array,
            default: []
        }
    },
    computed: {
        nowTableDate(){
            return this.listdata.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize) || []
        }
    },
    data(){
        return {
            currentPage: 1, // 第几页
            pageSize: 10,// 每页多少条数据
            currentList: {
              title: "修改店铺",
              list: {}
            }
        }
    },
    methods: {
      //编辑
      handleEdit(index, row){
        this.currentList.list = row
        this.$emit('modifyFrom', this.currentList)
      },
      //删除
      handleDelete(index, row){
        this.$confirm('此操作将永久删除该店铺, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          if(row.status == 1){
            this.$alert('该店铺已被启用，无法删除!', '提示', {
              confirmButtonText: '确定'
            });
            return;
          }
          this.$http({
              method: 'delete',
              url: `/backend/api/merchant/${row.id}`,
          }).then(res => {
              this.$emit('refreshList')
              this.$message({
                message: '删除成功',
                type: 'success'
              });
          }).catch(err=>{
              this.$message({
                message: '删除失败,请重试',
                type: 'warning'
              });
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    mounted(){
        
    }
}
</script>

<style>
.listHead-box{
    width: 100%;
    height: 50px;
    overflow: hidden;
}
.listHead{
    width: 100%;
    height: auto;
}
.el-pagination{
    margin-top: 20px;
}
</style>